<template>
  <!--引入底部demo-->
  <van-tabbar v-model="active" @change="changeTab">
    <van-tabbar-item icon="wap-home">首页</van-tabbar-item>
    <van-tabbar-item icon="setting">我的</van-tabbar-item>
    <van-tabbar-item icon="shop">你的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  props: {
    selectIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      // active: this.$route.path === '/mine' ? 1 : 0
      active: parseInt(this.selectIndex)
    }
  },
  methods: {
    changeTab: function (index) {
      console.log(index)
      // this.active = index
      if (index === 0) {
        this.gotoIndex()
      } else if (index === 1) {
        this.gotoMine()
      } else if (index === 2) {
        this.gotoTab3()
      }
    },
    gotoIndex: function () {
      this.$router.push({path: '/questionList'})
    },
    gotoMine: function () {
      // console.log('gotoMine')
      this.$router.push({path: '/mine'})
      // console.log('gotoMine2')
    },
    gotoTab3: function () {
      this.$router.push({path: '/tab3'})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
